<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-type" value="text/html; charset=UTF-8" />
        <jsp:include page="includes/script.html"/>
        
        <title>Electricity Cost Data</title>
    </head>
    <body>

        <h2 align="center">Electricity Cost Data</h2>

        <br>
        <center>
            
        <form method="get">


            From : <input type="text" value="${start}" name="start" readonly> <img src="images/calendar.gif" onclick="displayDatePicker('start', false, 'ymd', '-');" />&nbsp;
             To : <input type="text" value="${end}" name="end" readonly> <img src="images/calendar.gif" onclick="displayDatePicker('end', false, 'ymd', '-');" />&nbsp;
               <input  type="submit" name="submit" value="View" >

        </form>

               <br>
        <table cellpading="1" cellspacing="1" bgcolor="#010101" align="center" width="800">
            <tr bgcolor="#c2c3c4">
                            <td width="10%">Month</td>
                            <td width="10%">Rp/Kwh</td>
                            <td width="10%">kWH (x1000)</td>
                             <td width="10%">Total Cost (Mill Rp)</td>
                            <td width="30%">Note English</td>
                            <td>Note Japan</td>
                                                      
                           
                            <td></td>
                        </tr>

                        <c:set var="total" value="0" />

                        <c:forEach items="${data}" var="data">
                            <c:set var="total" value="${(data.kwh*data.rpkwh)/1000}" />
                            

                            <tr bgcolor="#f2f3f4">

                            <td><fmt:formatDate pattern="MMM yyyy" value="${data.bulan}" /></td>
                            <td><fmt:formatNumber type="number" maxFractionDigits="0" value="${data.rpkwh}" /></td>
                            <td><fmt:formatNumber type="number" maxFractionDigits="0" value="${data.kwh}" /></td>
                            <td><fmt:formatNumber type="number" maxFractionDigits="0" value="${total}" />
                            <td>${data.noteenglish}</td>
                            <td>${data.notejapan}</td>
                            </td>
                            <td>
                                <a href="listrik-update.htm?id=${data.id}">Edit</a>&nbsp;
                                <a href="view-listrik-data.htm?id=${data.id}">Delete</a>&nbsp;
                            </td>

                        </tr>
                        </c:forEach>

                </table>
${msg}
        </center>
    </body>
</html>
